import { fetchList, handleAction } from ".";
import { colorOptions, columns, orderStatusOptions } from "./store";
export const tablePage = renderTablePage();
export const tableData = ref([{}]);
export const tableLoading = ref(false);
const defineBodyCellMap = ({ value, text, index, column, record }) => {
  const renderStatus = () => (
    <div>
      <i class={colorOptions[record.status]}>
        {selectDictLabel(orderStatusOptions, record.status)}
      </i>
    </div>
  );
  const renderAction = () => (
    <div>
      {withDirectivePower({
        vNode: renderDetail.call({
          record,
          handleAction,
          identify: "payApi.selectDataById",
        }),
        bindingValue: "payApi.selectDataById",
      })}
    </div>
  );
  return new Map([
    [{ key: "index" }, renderIndex],
    [{ key: "status" }, renderStatus],
    [
      { key: "user_info" },
      renderUserInfo.bind({ record: value ?? {}, tableLoading }),
    ],
    [{ key: "action" }, renderAction],
  ]);
};
const handleRenderBodyCellTask = (props) => {
  const array = [...defineBodyCellMap(props)].filter(
    ([object]) => object.key === props.column.key
  );
  const _this = { tablePage, ...props };
  return array.map(([, value]) => value.call(_this));
};

export const tableConfig = () => {
  const defineTable = {
    pagination: tablePage,
    loading: tableLoading,
    columns: columns,
    dataSource: tableData,
    on: {
      change(paging: { current: number; pageSize: number }) {
        tablePage.current = paging.current;
        tablePage.pageSize = paging.pageSize;
        fetchList();
      },
    },
    tableSlot: {
      bodyCell: (props) => handleRenderBodyCellTask(props),
    },
  };
  return defineTable;
};
